<template>
  <BaseControlTemplate
    :new-params="newParams"
    :page-view-mode="pageViewMode"
    :readonly="readonly"
    :model-value="modelValue"
    :validate-error="validateError"
    :save-dialog-config="saveDialogConfig"
  >
    <template>
      <div v-if="pageViewMode === 'print'" class="printDiv">
        {{ modelValue2 }}
      </div>
      <div v-else>
      <!-- 时间类型 -->
      <el-time-picker
        v-if="newParams.dateType === 'Time'"
        v-model="modelValue2"
        :readonly="pageViewMode !== 'runtime' || readonly"
        :picker-options="{
          selectableRange: '00:00:00 - 23:59:59',
        }"
        value-format="HH:mm:ss"
        :placeholder="newParams.placeholder"
        @change="validateRequired($event)"
      ></el-time-picker>
      <!-- 日期类型 -->
      <el-date-picker
        v-else-if="newParams.dateType === 'Date'"
        v-model="modelValue2"
        :readonly="pageViewMode !== 'runtime' || readonly"
        :type="dateType"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        :placeholder="newParams.placeholder"
        @change="validateRequired($event)"
      ></el-date-picker>
      <!-- 时间日期类型 -->
      <el-date-picker
        v-else
        v-model="modelValue2"
        :readonly="pageViewMode !== 'runtime' || readonly"
        :type="dateType"
        value-format="yyyy-MM-dd HH:mm:ss"
        :placeholder="newParams.placeholder"
        @change="validateRequired($event)"
      ></el-date-picker>
    </div>
    </template>
  </BaseControlTemplate>
</template>

<script>
import mixins from "../../mixins/vue.js";
import { deepClone } from "../../utils";
import { time, shortTime, secondsTime } from "../../utils/moment";
import { checkType } from "../../utils/validate";
export default {
  name: "ControlDatePicker",
  mixins: [mixins],
  data() {
    return {
      newParams: {},
      placeholderDict: {
        Date: "请选择日期",
        Time: "请选择时间",
        Datetime: "请选择日期和时间",
      },
      dateType: "",
    };
  },
  created() {
    this.newParams = deepClone(this.params);
    this.dateType = this.newParams.dateType.toLocaleLowerCase();
    this.pageViewMode !== "design" && this.assembleModelValue();
    this.pageViewMode === "design"
      ? (this.newParams.placeholder = "")
      : this.placeholderDict[this.newParams.dateType];
  },
  methods: {
    assembleModelValue() {
      if (!this.isCreate) {
        this.modelValue2 = this.newParams.value;
        return;
      }
      switch (this.newParams.defaultValue.type) {
        case "none":
          this.modelValue2 = undefined;
          break;
        case "nowDate":
          this.modelValue2 = new Date();
          break;
        default:
          var nowDate = new Date();
          nowDate.setDate(
            nowDate.getDate() + Number(this.newParams.defaultValue.date)
          );
          this.modelValue2 = nowDate;
          break;
      }
    },
    saveDialogConfig(val) {
      for (var i in val) {
        Object.prototype.hasOwnProperty.call(this.newParams, i) &&
          (this.newParams[i] = val[i]);
      }
      this.modelValue2 = "";
      this.newParams.placeholder =
        this.pageViewMode === "design"
          ? ""
          : this.placeholderDict[this.newParams.dateType];
    },
    validate() {
      if (this.pageViewMode === "runtime") {
        if (checkType(this.modelValue2) !== "Date") {
          this.newParams.value = this.modelValue2;
        } else {
          switch (this.dateType) {
            case "date":
              this.newParams.value = shortTime(this.modelValue2);
              break;
            case "dateTime":
              this.newParams.value = time(this.modelValue2);
              break;
            default:
              this.newParams.value = secondsTime(this.modelValue2);
              break;
          }
        }
        this.validateRequired();
      }
      return {
        validateError: this.validateError,
        controlValue: this.newParams,
      };
    },
  },
};
</script>
